<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row class="live_wrapper clearfix">
          <Select v-model="filter.state"
                  style="float:right; width: 200px;margin-right: 35px;"
                  @on-change="search"
                  placeholder="抢修状态">
            <Option value="0">全部</Option>
            <Option value="1">已接单</Option>
            <Option value="2">已出发</Option>
            <Option value="3">已到达</Option>
            <Option value="4">维修取消</Option>
            <Option value="5">维修中</Option>
            <Option value="6">维修完成</Option>
            <Option value="7">已评价</Option>
          </Select>
          <Select v-model="filter.repair_id"
                  style="float:right; width: 200px;margin-right: 35px;"
                  @on-change="search"
                  placeholder="选择抢修队">
            <Option value="0">全部</Option>
            <Option :value="item.id"
                    v-for="(item, index) in repair_list">{{item.name}}</Option>
          </Select>
        </Row>
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_detail"
           title="详情"
           width="700px"
           :mask-closable="false"
           class="public_modal_header edit_modal show_audit">
      <div style="padding: 20px 0;">
        <div id="repairDetail"
             style="padding-left: 50px;">
          <div style="font-size:18px; color:#333">
            <p>用户信息</p>
            <p style="margin-top:10px;margin-left:10px">姓名：{{cur_obj.user_name}}</p>
            <p style="margin-top:10px;margin-left:10px">手机号：{{cur_obj.user_phone}}</p>
          </div>
          <div style="margin-top:40px; font-size:18px; color:#333">
            <p>故障信息</p>
            <p style="margin-top:10px;margin-left:10px">故障地址：{{cur_obj.task_area+cur_obj.task_address}}</p>
            <p style="margin-top:10px;margin-left:10px">故障位置：{{cur_obj.task_address_detail}}</p>
            <p style="margin-top:10px;margin-left:10px">设备类型：{{cur_obj.task_device_name}}</p>
            <p style="margin-top:10px;margin-left:10px">故障类型：
              <span style="display:inlin-block; margin-right:30px"
                    v-for="(item, index) in cur_obj.task_gz_name">{{item}}</span>
            </p>
            <p style="margin-top:10px;margin-left:10px">故障描述：{{cur_obj.task_content}}</p>
            <p style="margin-top:10px;margin-left:10px">是否需要应急保电：{{parseInt(cur_obj.task_is_need_bd) ? '是' : '否'}}</p>
            <p style="margin-top:10px;margin-left:10px">预估费用：{{cur_obj.cost}}</p>
            <p style="margin-top:10px;margin-left:10px">故障图片</p>
            <p style="margin-top:10px;margin-left:20px">
              <img :src="item"
                   style="margin-right:12px; width:60px; height:60px"
                   v-for="(item, index) in cur_obj.task_imgs">
            </p>
          </div>
          <div style="margin-top:40px; font-size:18px; color:#333"
               v-if='cur_obj.repair_state>0'>
            <p>维修员信息</p>
            <p style="margin-top:10px;margin-left:10px">姓名：{{cur_obj.repair_user_name}}</p>
            <p style="margin-top:10px;margin-left:10px">手机号：{{cur_obj.repair_user_phone}}</p>
            <p style="margin-top:10px;margin-left:10px">施工单位：{{cur_obj.repair_name}}</p>
          </div>
          <div style="margin-top:40px; font-size:18px; color:#333">
            <p>维修方案</p>
            <p style="margin-top:10px;margin-left:10px">{{cur_obj.repair_start_content}}</p>
            <p style="margin-top:10px;margin-left:10px">
              <img :src="item"
                   style="margin-right:12px; width:60px; height:60px"
                   v-for="(item, index) in cur_obj.repair_start_imgs">
            </p>
          </div>
          <div style="margin-top:40px; font-size:18px; color:#333">
            <p>修后记录</p>
            <p style="margin-top:10px;margin-left:10px">{{cur_obj.repair_finsh_content}}</p>
            <p style="margin-top:10px;margin-left:10px">
              <img :src="item"
                   style="margin-right:12px; width:60px; height:60px"
                   v-for="(item, index) in cur_obj.repair_finsh_imgs">
            </p>
          </div>
          <div style="margin-top:40px; font-size:18px; color:#333">
            <p>用户评价</p>
            <p style="margin-top:10px;margin-left:10px">完成时间：<span v-if='cur_obj.repair_evaluate_star_finsh_time'>{{cur_obj.repair_evaluate_star_finsh_time}}星好评</span>
              <span v-if='!cur_obj.repair_evaluate_star_finsh_time'>未评价</span>
              <Rate disabled
                    v-model="cur_obj.repair_evaluate_star_finsh_time"
                    v-if='0' />
            </p>
            <p style="margin-top:10px;margin-left:10px">完成质量：<span v-if='cur_obj.repair_evaluate_star_finsh_quality'>{{cur_obj.repair_evaluate_star_finsh_quality}}星好评</span>
              <span v-if='!cur_obj.repair_evaluate_star_finsh_time'>未评价</span>
              <Rate disabled
                    v-model="cur_obj.repair_evaluate_star_finsh_quality"
                    v-if='0' />
            </p>
            <p style="margin-top:10px;margin-left:10px">服务态度：<span v-if='cur_obj.repair_evaluate_star_service'>{{cur_obj.repair_evaluate_star_service}}星好评</span>
              <span v-if='!cur_obj.repair_evaluate_star_finsh_time'>未评价</span>
              <Rate disabled
                    v-model="cur_obj.repair_evaluate_star_service"
                    v-if='0' />
            </p>
            <p style="margin-top:10px;margin-left:10px">评价内容：{{cur_obj.repair_evaluate_content ? cur_obj.repair_evaluate_content : '未评价'}}</p>
            <p style="margin-top:10px;margin-left:10px">评价时间：{{cur_obj.repair_evaluate_time ? cur_obj.repair_evaluate_time : '未评价'}}</p>
          </div>
        </div>
        <Button type="primary"
                v-print="printObj"
                style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:255px; margin-top:13px; margin-bottom:20px"
                v-if='0'>打印</Button>

        <Button type="primary"
                @click="printHtmlCss"
                style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:255px; margin-top:13px; margin-bottom:20px">打印</Button>
      </div>
    </Modal>
    <Modal v-model="show_cancel_task_repair"
           title="操作提示"
           width="400px"
           :mask-closable="false"
           @on-ok="cancelTaskRepairOk">
      <p v-if="!cur_obj.is_admin">确认取消抢修订单?</p>
    </Modal>
    <Modal v-model="show_select_repair"
           title="选择抢修队"
           width="500px"
           :mask-closable="false"
           class="public_modal_header edit_modal">
      <div style="width: 100%;margin: 0 auto;padding: 50px;">
        <span style="margin-right: 11px;">选择抢修队</span>
        <Select v-model="repair_id"
                style="width: 300px;"
                placeholder="抢修队">
          <Option :value="item.id"
                  v-for="(item, index) in repair_list">{{item.name}}</Option>
        </Select>
      </div>
      <div class="btns">
        <Button @click.stop="show_select_repair = false">取消</Button>
        <Button @click.stop="assignRepairOk"
                type="primary"
                style="margin-left:15px;">确定</Button>
      </div>
    </Modal>
    <Modal v-model="show_select_repair_user"
           title="选择抢修队员"
           width="500px"
           :mask-closable="false"
           class="public_modal_header edit_modal">
      <div style="width: 100%;margin: 0 auto;padding: 50px;">
        <span style="margin-right: 11px;">选择抢修队员</span>
        <Select v-model="repair_user_id"
                style="width: 300px;"
                placeholder="抢修队员">
          <Option :value="item.id"
                  v-for="(item, index) in repair_user_list">{{item.name}}</Option>
        </Select>
      </div>
      <div class="btns">
        <Button @click.stop="show_select_repair = false">取消</Button>
        <Button @click.stop="changeRepairUserOk"
                type="primary"
                style="margin-left:15px;">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import printJS from "print-js";
import config from '@/config'
import { repairListForSelect, taskRepairList, cancelTaskRepair, assignTaskRepair, repairUserListForSelect, changeRepairUser, taskRepairDetail, changeTaskRepairStatus } from '@/api/main'
export default {
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'task_content',
          title: '任务内容',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.task_content)
          },
        },
        {
          key: 'user_name',
          title: '任务发起者',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.user_name)
          },
        },
        {
          key: 'repair_name',
          title: '抢修队',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.repair_name)
          },
        },
        {
          key: 'repair_user_name',
          title: '抢修员',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.repair_user_name)
          },
        },
        {
          key: 'state_name',
          title: '抢修状态',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.state_name)
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    display: params.row.state == 0 ? 'inline-block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.cancelTaskRepair(params.row)
                    },
                  },
                },
                '取消订单',
              ),
              h(
                'Button',
                {
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    display: params.row.state == 1 ? 'inline-block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.changeRepairUser(params.row)
                    },
                  },
                },
                '修改派单',
              ),
              h(
                'Button',
                {
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF'
                  },
                  on: {
                    click: () => {
                      this.showDetail(params.row)
                    },
                  },
                },
                '详情',
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该订单吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      obj.status = -1
                      changeTaskRepairStatus(obj).then(res => {
                        if (res.code === 0) {
                          this.$Message.success('操作成功')
                          this.init()
                        } else {
                          this.$Message.error(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        marginBottom: '5px',
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    '删除',
                  ),
                ],
              ),
            ])
          },
        },
      ],
      item_id: 0,
      repair_id: 0,
      repair_user_id: 0,
      list: [],
      repair_list: [],
      repair_user_list: [],
      loading: true,
      filter: {
        page: 0,
        repair_id: 0,
        state: '-1'
      },
      cur_obj: {},
      show_detail: false,
      show_cancel_task_repair: false,
      show_select_repair: false,
      show_select_repair_user: false,
      printObj: {
        id: "repairDetail",
        popTitle: '打印',
        extraCss: 'https://www.google.com,https://www.google.com',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #repairDetail { height: 100px !important; } </style>'
      }
    }
  },
  methods: {
    printHtmlCss () {
      const style = "@page { margin: 0 } @media print { h1 { color: blue } }"; //直接写样式
      printJS({
        printable: "repairDetail",
        type: "html",
        style: style,
        scanStyles: false
      });
    },

    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.init()
    },
    search: function () {
      this.filter.page = 0
      this.init()
    },
    cancelTaskRepair (item) {
      this.item_id = item.id
      this.show_cancel_task_repair = true
    },
    cancelTaskRepairOk () {
      let obj = {}
      obj.id = this.item_id
      cancelTaskRepair(obj).then(res => {
        if (res.code == 0) {
          this.$Message.success('操作成功')
          this.show_cancel_task_repair = false
          this.init()
        } else {
          this.$Message.error(res.text)
        }
      })
    },
    assignRepair (item) {
      this.item_id = item.id
      repairListForSelect().then(res => {
        if (res.code == 0) {
          this.repair_list = res.data
          this.show_select_repair = true
        }
      })
    },
    assignRepairOk () {
      let obj = {}
      obj.id = this.item_id
      obj.repair_id = this.repair_id
      assignTaskRepair(obj).then(res => {
        if (res.code == 0) {
          this.$Message.success('操作成功')
          this.show_select_repair = false
          this.init()
        } else {
          this.$Message.error(res.text)
        }
      })
    },
    changeRepairUser (item) {
      this.item_id = item.id
      let obj = {}
      obj.repair_user_id = item.repair_user_id
      repairUserListForSelect(obj).then(res => {
        if (res.code == 0) {
          this.repair_user_list = res.data
          this.show_select_repair_user = true
        }
      })
    },
    changeRepairUserOk () {
      if (!this.repair_user_id) {
        this.$Message.error('请选择抢修员'); return;
      }
      let obj = {}
      obj.id = this.item_id
      obj.repair_user_id = this.repair_user_id
      changeRepairUser(obj).then(res => {
        if (res.code == 0) {
          this.$Message.success('操作成功')
          this.show_select_repair_user = false
          this.init()
        } else {
          this.$Message.error(res.text)
        }
      })
    },
    showDetail (obj) {
      taskRepairDetail(obj).then(res => {
        if (res.code == 0) {
          this.cur_obj = res.data
          this.show_detail = true
        }
      })
    },
    init () {
      taskRepairList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    }
  },
  mounted () {
    this.init();
    repairListForSelect(this.filter).then(res => {
      this.repair_list = res.data
    })
  }
}
</script>
<style lang="less" scoped>
@page {
	margin-top: 1mm; //去掉页眉
	margin-bottom: 1mm; //去掉页脚
}
.show_audit {
	/deep/ .ivu-form {
		overflow-y: scroll;
		height: 600px;
		padding-bottom: 70px;
	}
	.audit_btm {
		justify-content: center;
		align-items: center;
		margin-top: 50px;
		background: rgb(250, 251, 252);
		padding: 15px;
		text-align: center;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}
</style>
